import React from 'react';
import Vc from '../css/Vip.module.css'
import { Row, Col, Icon } from 'antd';
import { BrowserRouter as Router, Route, NavLink, Redirect } from 'react-router-dom'
import Center from './Center'
import Vipmessage from './Vipmessage';
import Mycoupon from './Mycoupon';
import Address from './Address';
import Myorder from './Myorder'
import Myfavorite from './Myfavorite'
import Cart from './Cart'
import Orderdetail from './Orderdetail'
export default class Vipcen extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div className={Vc.box}>
                <Router>
                    <div>
                        <div className={Vc.top1}>
                            <div className={Vc.top}>
                                <Row >
                                    <Col span={8}><p>您好，欢迎来到  玩具乐器模板一!</p></Col>
                                    <Col span={8} offset={8} className={Vc.topright}>
                                        <NavLink to="/home" onClick={this.homeh.bind(this)} ><Icon type="home" />首页</NavLink>
                                        <b>|</b>
                                        <NavLink to="/cart" ><Icon type="shopping-cart" />购物车</NavLink>
                                        <b>|</b>
                                        <NavLink to="/register" className={Vc.tui} onClick={this.tuic.bind(this)}><Icon type="poweroff" />退出</NavLink>
                                    </Col>
                                </Row>
                            </div>
                        </div>

                        <div className={Vc.logo}>
                    <img src="http://image.fast.126net.cn/group2/M00/01/35/wKgBTFt1O66AHsxxAABSTbPxnPI447.png" />
                    <p className={Vc.xian}></p>
                    <h2>会员中心</h2>
                    <ul className={Vc.list} ref="pwor" onClick={this.pwor.bind(this)}>
                        <li>
                           <NavLink to="/center"><Icon type="home" />会员中心</NavLink> 
                        </li>
                        <li>
                        <NavLink to="/vipmessage"><Icon type="user" />会员信息</NavLink> 
                        </li>
                        <li>
                        <NavLink to="/mycoupon"><Icon type="money-collect" />我的优惠券</NavLink>  
                        </li>
                        <li>
                        <NavLink to="/address"><Icon type="environment" />收货地址</NavLink>  
                        </li>
                        <li>
                        <NavLink to="/myfavorite"> <Icon type="star" />我的收藏</NavLink> 
                        </li>
                        <li>
                        <NavLink to="/myorder"><Icon type="container" />我的订单</NavLink>  
                        </li>
                    </ul>
                </div>
                <div className={Vc.fen}></div>
                {/* 线 */}
                <div ref="shows" className={Vc.shows}>
                    <Route path="/center" component={Center}></Route>
                    <Route path="/vipmessage" component={Vipmessage}></Route>
                    <Route path="/mycoupon" component={Mycoupon}></Route>
                    <Route path="/address" component={Address}></Route>
                    <Route path="/myfavorite" component={Myfavorite}></Route>
                    <Route path="/myorder" component={Myorder}></Route>
                    <Route path="/cart" component={Cart}></Route>
                    <Route path="/orderdetail" component={ Orderdetail }></Route>

                </div> 

                    </div>
                </Router>
                {/* foot */}
                <div className={Vc.footer}>
                    <div className={Vc.footercenter}>
                        <p>Copyright © 2018 琴峰玩具乐器商行All Rights Reserved</p>
                    </div>
                </div>
            </div>
        )
    }
    pwor(e) {
        let pwors = this.refs.pwor.children
        let shows = this.refs.shows.children
        console.log(pwors)
        for (let i = 0; i < pwors.length; i++) {
            if (e.target == pwors[i]) {
                for (let j = 0; j < shows.length; j++) {
                    if (i == j) {
                        shows[j].style.display = "block"
                    }
                    else {
                        shows[j].style.display = "none"
                    }

                }
            }
        }
    }
    homeh(){

        this.props.history.push('/home')
    }
    tuic(){

        this.props.history.push('/login')

    }
}